<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>模块和控制器</title>
</head>
<body ng-app="app">
    <div ng-controller="demoCtrl">
        <!--插值表达式，默认$scope上的成员属性都可以在页面中通过{{属性名}}的方式进行展示 -->
        <h2>{{title}}</h2>
        <!-- ng-click:angular提供的注册事假的指令，大部分js事件都有对应de ng-事件 -->
        <!-- $event为事件源参数；等同于js中的event对象 -->
        <button ng-click="tips($event)">点击触发tips()</button>
        <button ng-mouseover="tips($event)">mouseover触发tips()</button>
    </div> 
</body>
<script src="./libs/js/angular-1.6.9.min.js"></script>
<script>
    //声明一个模块，一个项目必须至少有一个或多个模块
    var app=angular.module('app',[]);
    //创建一个控制器controller，控制器必须基于一个模块
    //$scope是angular提供的一个局部的顶级对象，默认所有需要在页面中使用的变量和方法都需要注册成$scope的成员属性
    /*
        这种写法有一个弊端，就是js压缩混淆的时候会把$scope替换成一些没有意义的单字符，
        但是这里的$scope不仅仅是一个形参，还是angular提供的一个全局对象，故替换成单字符以后代码肯定会报错
    */ 
    // app.controller("demoCtrl",function($scope){
    //     $scope.title="模块和控制器";
    //     $scope.tips=function(event){
    //         console.log(event.target);
    //         event.target.innerHTML='hello'
    //         console.log('方法被触发了');
    //     }
    // });
    //此种方式可以有效避免以上问题，开发中建议采用此种写法：第二项采用数组的写法，因为压缩混淆js的时候肯定不会替换数组的元素
    app.controller('demoCtrl',['$scope',function($scope){
        $scope.title="模块和控制器";
        $scope.tips=function(event){
            console.log(event.target);
            event.target.innerHTML='hello'
            console.log('方法被触发了');
        }
    }]);

</script>
</html>